<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="全部服务"> </mh-header>
      <div class="mui-segmented-control mh-segmented">
        <a class="mui-control-item mui-active" @click="handleCondition(1)"><span>全部</span></a>
        <a class="mui-control-item" @click="handleCondition(2)"><span>已订购</span></a>
        <a class="mui-control-item" @click="handleCondition(3)"><span>已过期</span></a>
      </div>
      <div class="service-box">
        <h4 class="mui-text-center">会员服务</h4>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/profile/member'}">
              <span>高级会员</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/profile/member'}">
              <span>水晶会员</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/profile/member'}">
              <span>翡翠会员</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/profile/member'}">
              <span>钻石会员</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
        </ul>
      </div>

      <div class="service-box">
        <h4 class="mui-text-center">订阅提醒</h4>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/pay'}">
              <span>网友参与订阅</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/pay'}">
              <span>订阅提醒</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/pay'}">
              <span>红娘活动订阅</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
        </ul>
      </div>

      <div class="service-box">
        <h4 class="mui-text-center">特色服务</h4>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/pay'}">
              <span>看微信号</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/profile/crossFee'}">
              <span>跨城费</span>
              <span class="link-open mui-pull-right">开通</span>
            </router-link>
          </li>
          <li class="mui-table-view-cell">
            <router-link class="mui-navigate-right" :to="{path: '/profile/rewardSetting'}">
              <span>红包/打赏设置</span>
              <span class="link-open mui-pull-right">设置</span>
            </router-link>
          </li>
        </ul>
      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "all-service",
    components: {
      MhHeader
    },
    methods: {
      handleCondition (i) {

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .service-box {
    margin-bottom: 1rem;
    @include sc(1.5rem, #333);
    &:last-child {margin-bottom: 6rem;}
    h4 {
      padding: 1.5rem 0;
      @include sc(1.5rem, #333);
      background: #fff url("../../assets/images/bg/bg_color_pink.png") no-repeat center 2.1rem;
      background-size: 6.6rem .6rem;
    }
    .link-open {
      @include sc(1.5rem, #eb537f);
      margin-right: 20px;
    }
  }

</style>
